/**
 * 碳交所驾驶舱页面各页面中使用的函数.
 */

/**
 * 参与数据处理的中国地区(31个地区)
 */
var CHINA_REGIONS = ['北京','天津','上海','重庆','河北','山西','辽宁','吉林','黑龙江','江苏','浙江','安徽','福建','江西','山东','河南','湖北','湖南','广东','海南','四川','贵州','云南','陕西','甘肃','青海','内蒙古','广西','西藏','宁夏','新疆'];

// var THEME_LIGHT_COLORS = [
//   '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e062ae', '#e690d1', '#e7bcf3', '#9d96f5', '#8378ea', '#96bfff'
// ];

var THEME_LIGHT_COLORS = [
  '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c',
  '#e7bcf3','#e690d1',
  '#9d96f5', '#8378ea', '#96bfff',
   '#ff9f7f', '#fb7293', '#e062ae',
];


/**
 * 表示 中国 这一地区 的字符串
 */
var REGION_COUNTRY = '全国';


/**
 * 保留小数位数.
 */
Number.prototype.roundFloat = function(num) {
  num = num ? num : 1;
  if (this === NaN) {
    return '-';
  }
  return +(this).toFixed(num);
}


/**
 * 开户总数.
 * @param {object} chart 图表对象.
 * @param {object} $ulDom jQuery 的 dom 对象.
 * @param {array} data 数据
 * @param {string} region 显示哪个地区的数据(全国 则显示全部), 这里暂时没有使用.
 */
function displayUserStat(chart, $ulDom, data, region)
{
  var stat = {
    total: 0, // 合计开户
    total_enterprise: 0, // 企业开户
    total_person: 0, // 个人
    total_other: 0, // 投资机构
  };
  for (var r of data) {
    stat.total += r.total;
    stat.total_enterprise += r.total_enterprise;
    stat.total_person += r.total_person;
    stat.total_other += r.total_other;
  }
  stat.total_enterprise_percent = stat.total_enterprise ? (stat.total_enterprise / stat.total * 100).roundFloat() : 0;
  stat.total_person_percent = stat.total_person ? (stat.total_person / stat.total*100).roundFloat() : 0;
  stat.total_other_percent = stat.total_other ? (stat.total_other / stat.total*100).roundFloat() : 0;
  var seriesData = [
    {value: stat.total_enterprise, name: '重点排放单位'},
    {value: stat.total_other, name: '投资机构'},
    {value: stat.total_person, name: '个人'},
  ]

  $ulDom.html(
    $(
      '<li class="li1"><i></i><span>重点排放单位</span><em>'+stat.total_enterprise_percent +'%</em><b>'+ stat.total_enterprise +'</b></li>'+
        '<li class="li2"><i></i><span>投资机构</span><em>'+stat.total_other_percent +'%</em><b>'+ stat.total_other +'</b></li>'+
        '<li class="li3"><i></i><span>个人</span><em>'+stat.total_person_percent +'%</em><b>'+ stat.total_person +'</b></li>'
    )
  )

  var option = {
    color: ['#038eff','#41d159','#ffef0e'],
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    title: {
      text: '开户总数', //主标题
      subtext: stat.total, //副标题
      textStyle: {
        //主标题样式
        color: '#bfbfcb',
        fontWeight: 'normal',
        fontSize: 18
      },
      subtextStyle: {
        //副标题样式
        color: '#fff',
        fontSize: 40,
        fontWeight: 'bold'
      },
      left: 'center',
      top: '120'
    },
    series: [
      {
        name: '开户总数',
        type: 'pie',
        radius: ['57%', '70%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: seriesData,
      }
    ]
  };
  chart.setOption(option);
}

/**
 * 处理后台传来的 分配总量 数据.
 * @param {array} data
 * @return {object}
 */
function handleQuotaData(data)
{

  var total_allocateds = 0;
  var total_alloc_residues = 0;

  var filtered = data.filter(function(item){
    return CHINA_REGIONS.indexOf(item.region) >= 0;
  });
  // 按照配额 分配总量 从大到小来排序
  var sorted = filtered.map(function(item){
    total_allocateds += item.allocation_total
    total_alloc_residues += item.alloc_residue_total
    return {
      region: item.region,
      allocations: item.allocation_total, // 分配总量
      alloc_residues: item.alloc_residue_total, // 剩余分配量
      allocateds: item.allocation_total - item.alloc_residue_total, // 已分配总量
    }
  }).sort(function(a, b){
    if (a.allocations === b.allocations) {
      return 0;
    }
    return a.allocations > b.allocations ? -1 : 1;
  });

  var regions = sorted.map(function(i){ return i.region; });
  var allocateds = sorted.map(function(i){ return i.allocateds; }); // 已分配总量
  var alloc_residues = sorted.map(function(i){ return i.alloc_residues; }); // 剩余分配量 (也就是 分配总量 减去 已分配总量), 我们需要这个值 stack 到 已分配总量 上来表示 分配总量 的值
  var allocations = sorted.map(function(i){ return i.allocations; }); // 每个省自己的总分配量(分配总量)

  var tops = filtered.map(function(item){
    return {
      name: item.region,
      value: item.allocation_total - item.alloc_residue_total
    }
  }).sort(function(a, b){
    if (a.value === b.value) {
      return 0;
    }
    return a.value > b.value ? -1 : 1;
  }).slice(0, 3);

  return {
    regions: regions,
    allocateds: allocateds,
    alloc_residues: alloc_residues,
    allocations: allocations, // 每个省各自的 总分配量
    total_allocateds: total_allocateds, // 合计已分配量
    total_alloc_residues: total_alloc_residues, // 合计剩余分配量
    total_allocation: total_allocateds+total_alloc_residues, // 合计总分配量
    top_allocated_province: tops,
  };
}

/**
 * 用于记录 scrollChart 函数产生的 定时器 的数组.
 */
var scrolls = [];
/**
 * 让图表滚动.
 * 这个函数必须支持重复调用时在一个容器上只运行一个定时器.
 * @param {object} chart 图表对象
 * @param {object} options 滚动相关参数
 * @param {string} containerId 图标容器的id
 */
function scrollChart(chart, options, containerId){
  // start 是 datazoom 的左轴位置
  var start = options.start ? options.start : 0;
  var originStart = start;
  // end 是 datazomm 的右轴位置
  var end = options.end ? options.end : 20;
  var originEnd = end;
  // 滑动范围
  var slideUnit = options.slide_unit ? options.slide_unit : 5;
  // 间隔时间
  var intervalTime = options.interval_time ? options.interval_time : 2000;

  if (scrolls[containerId]) {
    clearInterval(scrolls[containerId]);
    scrolls[containerId] = null;
  }
  var flag = startScroll();
  scrolls[containerId] = flag;

  function startScroll(){
    function scrollChart(){
      start += slideUnit;
      end += slideUnit;
      if (end > 100) {
        start = originStart;
        end = originEnd;
      }
      chart.dispatchAction({type: 'dataZoom', start: start, end: end});
    }
    chart.on('datazoom', function (obj) {
      if (obj.batch && obj.batch[0]) {
        // 拖动图表时触发事件
        start = obj.batch[0].start
        end = obj.batch[0].end
      } else {
        // 手动触发事件
        start = obj.start
        end = obj.end
      }
    })
    return setInterval(scrollChart, intervalTime);
  }

  function stopScroll(flag) {
    clearInterval(flag);
    scrolls[containerId] = null;
  }

  // 这里没必要先取消绑定事件, 应该是直接覆盖原始事件...
  document.getElementById(containerId).onmouseover = function(){
    stopScroll(flag)
  }
  document.getElementById(containerId).onmouseout = function(){
    flag = startScroll();
    scrolls[containerId] = flag;
  }
}


/**
 * 企业履约风险指数 (二级页面) 中的 数据列表.
 * @param {object[]} data
 * @param {object} $dom
 */
function displayRiskDetail(data, $dom)
{
  var perGroupCount = 20; // 每个分组显示多少条数据
  var group = [];
  for (var item of data) {
    item.risk_origin = parseFloat(item.risk);
    item.risk = (parseFloat(item.risk)*100).roundFloat();
  }
  data.sort(function(a, b){
    if (a.risk === b.risk) {
      return 0;
    }
    return a.risk > b.risk ? -1 : 1;
  })
  // 将数据分组
  var groupCount = Math.ceil(data.length / perGroupCount);
  for (var i=1; i <= groupCount; i++) {
    group.push(data.slice((i-1)*perGroupCount, i*perGroupCount));
  }

  var order = 1;
  var $groups = [];
  for (var part of group) {
    $groups.push(generateRiskList(part, order));
    order += perGroupCount;
  }
  $dom.html($groups);
}

/**
 * 生成一个 企业履约风险指数 的列表.
 * @param {object[]} data
 * @param {int} order 当前列表中第一条数据的排序值.
 * @return {object}
 */
function generateRiskList(data, order)
{
  var $lis = [];
  if (!order) {
    order = 1;
  }
  for (var item of data) {
    var colorClassName = item.risk >= 90 ? 'color_red' : (item.risk >= 70 ? 'color_yellow' : 'color_green');
    $lis.push(
      $('<li class="'+colorClassName+'">'+
        '<span class="span1">'+order+'</span>'+
        '<span class="span2">'+item.region+'</span>'+
        '<span class="span3" title="'+item.company_name+'">'+item.company_name+'</span>'+
        '<div class="span4"><span><i style="width:'+item.risk+'%;"></i></span><em>'+item.risk+'%</em></div>'+
        '<span class="span5">'+item.total_need+'</span>'+
        '<span class="span6">'+item.total_actual+'</span>'+
        '<span class="span7">'+item.total_quato+'</span>'+
        '<span class="span8">'+item.total_trade+'</span>'+
        '<span class="span9">'+item.total_balance+'</span></li>')
    );
    order++;
  }

  var $ul = $('<ul></ul>').append($lis);
  var $div = $('<div class="swiper-slide"></div>').append($ul);
  return $div;
}